<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
const isAgree = ref(false);
const btnLoading = ref(false);
/* tab切换 */
const tabIndex = ref(1);
const handleTab = (index: number) => {
  if (index === 0)
    return ElMessage({
      message: "功能开发中...",
      type: "warning",
    });
  tabIndex.value = index;
};

/* 表单验证 */
interface RuleForm {
  loginNo: string;
  password: string;
  verification: string;
  // PWD:密码登录  SMS:短信登录
  loginType: string;
}
const rules = reactive<FormRules<RuleForm>>({
  loginNo: [
    { required: true, message: "请输入账号", trigger: "blur" },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const ruleForm = reactive<RuleForm>({
  loginNo: "",
  password: "",
  // loginNo: "15938381025",
  // password: "qwe666",
  verification: "",
  loginType: "PWD",
});
const ruleFormRef = ref<FormInstance>();

const Verify = defineAsyncComponent(
  () => import("@/components/Verifition/Verify.vue")
);
const verifyref = ref<InstanceType<typeof Verify>>(null); // 定义verify组件引用
const verifyEnable = ref(true);
// 滑块验证码校验成功调用后台登录接口
const verifySuccess = (params: any) => {
  ruleForm.verification = params.captchaVerification;
  // 调用登录方法
  onSignIn();
};

// 调用滑块验证码进行校验
const handleVerify = async (formEl: FormInstance | undefined) => {
  if (!isAgree.value) {
    return ElMessage({
      message: "请阅读并同意用户与隐私及服务协议~",
      type: "warning",
    });
  }
  if (!formEl) return;
  const valid = await formEl.validate().catch(() => {}); // 表单校验
  if (valid && verifyEnable.value) {
    verifyref.value.show(); // 显示验证组件
  } else if (valid) {
    onSignIn(); // 调用登录方法
  }
};
// 是否登录
const isLogin = computed(() => userStore().getToken());
// 是否显示弹窗
const showSelectMerchant = ref(false);
// 账号密码登录
const onSignIn = async () => {
  try {
    btnLoading.value = true;
    // 用户登陆
    const res = await useApi().user.login(ruleForm);
    userStore().setToken(res.data.accessToken);
    // 获取用户信息
    const res2 = await useApi().user.userQuery();
    userStore().setUserInfo(res2.data);
    ElMessage({
      message: "登陆成功~",
      type: "success",
    });
    btnLoading.value = false;
    showSelectMerchant.value = true;
  } catch {
    btnLoading.value = false;
  }
};
let banner = ref("/images/index/banner1.png");
onMounted(() => {
  getBanner();
  getNotice();
});
const getBanner = async () => {
  const res = await useApi().app.getBanner({
    bannerCategory: "HOME_PAGE",
  });
  if (res.data.length) {
    banner.value = res.data[0].picUrl;
  }
};

const noticeList = ref<any[]>([]);
const getNotice = async () => {
  const res = await useApi().app.getNotice({
    pageSize: 3,
  });
  noticeList.value = res.data.datas;
};
const goNoticeDetail = (id: number) => {
  navigateTo({
    path: "/notice/details",
    query: { id: id },
  });
};
</script>

<template>
  <div class="swiper-pages" :style="{ backgroundImage: `url(${banner})` }">
    <div class="content one-content">
      <!-- <div class="banner-title">
        <h1>科技让支付更懂你</h1>
        <p>科技连接你我 支付改变生活</p>
      </div> -->
      <div class="login-box" v-if="!isLogin">
        <div class="tab">
          <div
            class="tab-item"
            :class="{ active: tabIndex === 0 }"
            @click="handleTab(0)"
          >
            扫码登录
          </div>
          <div
            class="tab-item"
            :class="{ active: tabIndex === 1 }"
            @click="handleTab(1)"
          >
            账号登录
          </div>
        </div>
        <div class="tab-cotent">
          <div class="tab-content-item" v-if="tabIndex === 0">
            <p>使用甬易支付APP扫码识别</p>
            <img class="qr-code" src="/images/index/banner1.png" alt="" />
          </div>
          <div class="tab-content-item" v-if="tabIndex === 1">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              style="max-width: 600px"
              label-width="auto"
              class="demo-ruleForm"
              @keyup.enter="handleVerify(ruleFormRef)"
            >
              <el-form-item prop="loginNo">
                <el-input v-model="ruleForm.loginNo" placeholder="请输入账号">
                  <template #prefix>
                    <img
                      class="input-icon"
                      src="/images/index/phone.png"
                      alt="phone"
                    />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  autocomplete="new-password"
                  v-model="ruleForm.password"
                  type="password"
                  placeholder="请输入密码"
                >
                  <template #prefix>
                    <img
                      class="input-icon"
                      src="/images/index/password.png"
                      alt="password"
                    />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div class="login-p">
                  <el-checkbox v-model="isAgree">
                    <template #default>
                      <p class="login-protocol">我已阅读并同意</p>
                    </template>
                  </el-checkbox>
                  <NuxtLink to="/agreement/privacy">
                    <span class="login-protocol-text">《用户与隐私协议》</span>
                  </NuxtLink>
                  <span class="login-protocol-s">及</span>
                  <NuxtLink to="/agreement/service">
                    <span class="login-protocol-text">《服务协议》</span>
                  </NuxtLink>
                </div>
              </el-form-item>
              <el-button
                :loading="btnLoading"
                class="login-btn"
                @click="handleVerify(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form>
          </div>
        </div>
        <div class="login-footer">
          <NuxtLink to="/register"><span>没有账户，去注册</span></NuxtLink>
          <NuxtLink to="/forgot"><span>忘记密码</span></NuxtLink>
        </div>
      </div>
    </div>
    <div class="pages-footer">
      <div class="content pages-c" v-if="noticeList.length">
        <h2 class="title">
          <p>最新公告</p>
        </h2>
        <div class="pages-content">
          <div
            class="footer-item"
            v-for="(item, index) in noticeList"
            :key="index"
            @click="goNoticeDetail(item.id)"
          >
            <p class="title">{{ item.title }}</p>
            <p class="txt">
              {{ item.publishTime }}
            </p>
          </div>
        </div>
        <NuxtLink to="/notice">
          <p class="more">
            查看更多
            <img src="/images/layouts/arrow-white.png" alt="more" />
          </p>
        </NuxtLink>
      </div>
    </div>
  </div>
  <client-only>
    <Teleport to="body">
      <Verify
        @success="verifySuccess"
        :mode="'pop'"
        :captchaType="'blockPuzzle'"
        v-if="verifyEnable"
        :imgSize="{ width: '330px', height: '155px' }"
        ref="verifyref"
      />
      <SelectMerchant v-model="showSelectMerchant" />
    </Teleport>
  </client-only>
</template>

<style lang="scss" scoped>
.swiper-pages {
  width: 100%;
  height: 100%;
  background-image: url("/images/index/banner1.png");
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  overflow: hidden;

  .one-content {
    margin-top: 6%;
  }

  .banner-title {
    float: left;
    margin-top: 66px;
    margin-left: 16px;
    position: relative;
    z-index: 3;
    h1 {
      font-weight: 700;
      font-size: 48px;
      color: #ffffff;
      line-height: 70px;
      letter-spacing: 1px;
      text-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }

    p {
      margin-top: 5px;
      font-weight: 400;
      font-size: 19px;
      text-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
      color: #ffffff;
    }
  }

  .login-box {
    float: right;
    width: 330px;
    background: #ffffff;
    box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    z-index: 11;
    position: relative;
    .tab {
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #dddddd;
      .tab-item {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        padding-bottom: 10px;
        cursor: pointer;
        transition: color 0.1s ease;
        &.active {
          font-weight: 600;
          font-size: 14px;
          color: #222222;
          border-bottom: 3px solid #e12010;
        }
      }
    }
    .tab-cotent {
      padding-top: 20px;
      box-sizing: border-box;
      .input-icon {
        width: 28px;
        height: 28px;
      }
      :deep(.el-form-item) {
        margin-bottom: 20px;
        .el-input__wrapper {
          width: 100%;
          box-sizing: border-box;
          height: 44px;
          border-radius: 4px;
          border-color: #dddddd;
        }
      }

      .login-protocol {
        font-weight: 400;
        font-size: 12px;
        color: #22242e;
        margin-left: 3px;
      }

      .login-protocol-text {
        cursor: pointer;
        color: #e12010;
      }
      .login-p {
        line-height: 24px;
        text-align: left;
      }
      .login-protocol-s {
        font-weight: 400;
        font-size: 14px;
        color: #9a9a9a;
      }
      .login-btn {
        width: 100%;
        height: 44px;
        background: #e22000;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background: rgba(226, 32, 0, 0.8);
        }
      }
      .tab-content-item {
        &:first-child {
          height: 100%;
          text-align: center;
          p {
            font-weight: 400;
            font-size: 14px;
            color: #9a9a9a;
          }
          .qr-code {
            width: 238px;
            height: 243px;
            margin: 15px auto 0 auto;
            display: block;
          }
        }
      }
    }
    .login-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      span {
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        color: #9a9a9a;
      }
    }
  }
  .pages-footer {
    height: 198px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 65px;
    box-sizing: border-box;
    background-image: url("/images/index/banner-footer.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    &.fhow {
      height: 80px;
    }

    .pages-c {
      display: flex;
    }
    .pages-content {
      display: flex;
      flex-direction: column;
      margin-left: 100px;
      flex: 1;
    }
    h2.title {
      font-weight: 600;
      font-size: 20px;
      color: #ffffff;
    }
    .more {
      width: 200px;
      display: flex;
      justify-content: flex-end;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.3s ease-in-out;
      img {
        margin-left: 5px;
        transition: transform 0.3s ease-in-out;
      }
      &:hover {
        color: #ffffff;
        img {
          transform: translateX(10px);
        }
      }
    }
    .footer-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      .title {
        width: 337px;
        font-weight: 600;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        &:hover {
          text-decoration: underline;
        }
      }
      .txt {
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        cursor: pointer;
        margin-left: 80px;
      }
    }
  }
}
@media screen and (max-width: 1800px) {
  :deep(.web-pagination) {
    display: none;
  }
}

:deep(.web-pagination) {
  display: none;
}
</style>
